<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0035)http://fgm.cc/learn/lesson2/05.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>函数传参，改变Div任意属性的值</title>
<style>
body,p{margin:0;padding:0;}
body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;}
#outer{width:300px;margin:0 auto;}
p{margin-bottom:10px;}
button{margin-right:5px;}
label{width:5em;display:inline-block;text-align:right;}
input{padding:3px;font-family:inherit;border:1px solid #ccc;}
#div1{color:#fff;width:180px;height:180px;background:#000;margin:0 auto;padding:10px;}
</style>
<script>
	
	onload = function(){
		var okBtn = document.getElementById("ok");
		var resetBtn = document.getElementById("reset");
		var oDiv = document.getElementById("div1");
		okBtn.onclick = function(){
			var propname = document.getElementsByName("prop")[0].value;
			//alert(propname);
			var propvalue = document.getElementsByName("val")[0].value;
			//alert(propvalue);
			
			oDiv.style[propname] = propvalue;
			
		}
		resetBtn.onclick = function(){
			oDiv.removeAttribute("style");
		}
	}
</script>
</head>
<body>
<div id="outer">
    <p><label>属性名：</label><input name="prop" type="text" value="background"></p>
    <p><label>属性值：</label><input name="val" type="text" value="blue"></p>
    <p><label></label><button id="ok">确定</button><button id="reset">重置</button></p>
</div>
<div id="div1">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>


</body></html>